<template>
  <div class="indexPoll-page app-container">
    <div class="head-top">
      <!-- <el-checkbox v-model="dataForm.start_align">起点对齐</el-checkbox> -->
      <span style="margin-left: 12px;">统计日期：</span>
      <el-date-picker v-model="dataForm.start_date" value-format="yyyy-MM-dd" size="mini" type="date" style="width: 135px;" @change="pickerHandle" placeholder="开始日期"></el-date-picker>
      <span style="padding: 0 4px;">-</span>
      <el-date-picker v-model="dataForm.end_date" value-format="yyyy-MM-dd" size="mini" type="date" style="width: 135px;" @change="pickerHandle" placeholder="截止日期"></el-date-picker>
    </div>
    <div class="head">
      <div class="line">
        <div class="label">股票指数：</div>
        <el-checkbox-group v-model="dataForm.strategyMethod" size="small" @change="checkboxHandle">
          <el-checkbox border :label="item.name" v-for="item in select_method" :key="item.id"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="line">
        <div class="label">债券指数：</div>
        <el-checkbox-group v-model="dataForm.strategyMethod" size="small" @change="checkboxHandle">
          <el-checkbox border :label="item.name" v-for="item in select_method1" :key="item.id"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="line">
        <div class="label">商品指数：</div>
        <el-checkbox-group v-model="dataForm.strategyMethod" size="small" @change="checkboxHandle">
          <el-checkbox border :label="item.name" v-for="item in select_method2" :key="item.id"></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <chart1 id="chart1" height="280px" width="100%"></chart1>
  </div>
</template>

<script>
import chart1 from '@/components/Charts/indexPoll/chart1.vue'
export default {
  name: 'IndexPollDetails',
  components: { chart1 },
  data() {
    return {
      dataForm: {
        // start_align: true,
        start_date: '',
        end_date: '',
        strategyMethod: []
      },
      select_method: [
        { id: 1, name: '哈哈' },
        { id: 2, name: '嘿嘿' },
        { id: 3, name: '呵呵' },
        { id: 4, name: '哈哈哈' },
        { id: 5, name: '嘿嘿嘿' },
        { id: 6, name: '呵呵呵' },
        { id: 7, name: '哈哈哈哈' },
        { id: 8, name: '嘿嘿嘿嘿' },
        { id: 9, name: '呵呵呵呵' },
        { id: 10, name: '哈哈哈哈哈' },
        { id: 11, name: '嘿嘿嘿嘿嘿' },
        { id: 12, name: '呵呵呵呵呵' },
        { id: 13, name: '哈哈哈哈哈哈' },
        { id: 14, name: '嘿嘿嘿嘿嘿嘿' },
        { id: 15, name: '呵呵呵呵呵呵' }
      ],
      select_method1: [
        { id: 1, name: '哈哈1' },
        { id: 2, name: '嘿嘿1' },
        { id: 3, name: '呵呵1' }
      ],
      select_method2: [
        { id: 1, name: '哈哈2' },
        { id: 2, name: '嘿嘿2' },
        { id: 3, name: '呵呵2' }
      ]
    }
  },
  methods: {
    checkboxHandle() {
      console.log(666, this.dataForm.strategyMethod)
    },
    pickerHandle() {
      console.log(console.log(666, this.dataForm))
    }
  }
}
</script>

<style lang="scss" scoped>
.indexPoll-page {
  padding: 20px;
  .head-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
  }
  .head {
    border: 1px solid #e1e0e0;
    padding: 0 20px;
    .line {
      display: flex;
      align-items: center;
      min-height: 70px;
      padding-bottom: 20px;
      .label { width: 120px; min-width: 120px; text-align: right; padding : 20px 20px 0 0; }
      & + .line { border-top: 1px dashed #e1e0e0; }
    }
    ::v-deep .el-checkbox.is-bordered {
      margin-top: 20px;
    }
    ::v-deep .el-checkbox.is-bordered+.el-checkbox.is-bordered {
      margin-left: 0px;
    }
  }
}
</style>

